<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;

        }

        .g-fire {
            display: flex;
            position: relative;
            justify-content: center;
            transform: translate(100%, 80%);
            width: 560px;
            height: 360px;
            background-color: #000;
            filter: blur(2px) contrast(20)
        }

        .g-ball {
            margin-left: 4px;
            position: absolute;
            top: 220px;
            transform: translate(0, 0);
            background-color: #FA874D;
            border-radius: 50%;
            z-index: -1;
            mix-blend-mode: screen;
        }

        @keyframes movetop {
            0% {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(0, 0);
            }

            87.7% {
                transform: translate(0, -170px) scale(0.5);
                opacity: 0;
            }

            100% {
                transform: translate(0, -170px) scale(0.1);
                opacity: 0;
            }
        }
    </style>
</head>

<body>



    <div class="g-fire">
        <div class="g-ball"></div>
    </div>



    <script>
        //   搭建结构
        let s = ` <div class="g-ball"></div>`
        for (let i = 0; i <= 200; i++) {
            let m = Math.floor(Math.random() * 4000) / 1000
            let w = Math.floor(Math.random() * 30)
            let l = Math.floor(Math.random() * 30)

            s += `<div class="g-ball" style=' width: ${w}px;  height: ${w}px;  left:${l}px; animation: movetop ${m}s  linear infinite; '></div>`
        }
        document.querySelector('.g-fire').innerHTML = s
        // 特效部分
        // 利用随机数

        
        // https://www.bilibili.com/video/BV1xS4y1c7Ni?share_source=copy_web  我是跟这个up主学的
    </script>
</body>

</html>